<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xrtqh
  Date: 2023/10/7
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>修改商品</title>
    <link rel="stylesheet" href="/static/css/form.css">
    <link rel="stylesheet" href="/static/icon/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4042237_hxpfhzx0l36.css">
    <style>
        .icon i {
            font-size: 30px;
            cursor: pointer;
            user-select: none;
        }
        .icon i:hover{
            background-color: #9E9E9E ;
        }
        #icon-active{
            background-color: #ff9800;
        }
        #icon{
            font-size: 50px;
        }
    </style>
</head>
<body>
<form action="" class="hh-form">
    <input type="hidden" name="id" value="${brand.id}">
    <div class="form-item">
        <label class="hh-label">商品品牌名称：</label><input type="text" class="hh-input hh-input-big" name="brandName" required value="${brand.brandName}">
    </div>
    <div class="form-item">
        <label class="hh-label">所属分类：</label>
        <select class="hh-input hh-input-big" name="productTypeId" datafld="${brand.name}">
            <c:forEach items="${brand.list}" var="two">
                <option value="${two.id}" class="option">${two.name}</option>
            </c:forEach>
        </select>
    </div>
    <div class="form-item">
        <label class="hh-label">品牌logo：</label>
        <input type="file" class="hh-upload">
        <div class="hh-upload-item">
            <c:if test="${brand.brandImg == null || brand.brandImg == ''}">
                <img src="/static/image/admin/login-title.jpg">
            </c:if>
            <c:if test="${brand.brandImg != null && brand.brandImg != ''}">
                <img src="/file/show?name=${brand.brandImg}">
            </c:if>
            <i class="iconfont icon-shangchuan"></i>
            <input type="hidden" name="brandImg" id="img" value="${brand.brandImg}">
        </div>
    </div>
    <div class=" form-item">
        <label class="hh-label"></label>
        <input type="submit" class="hh-bt hh-bt-primary submit" value="提交">
        <input type="button" class="hh-bt hh-bt-warning close" value="关闭">
    </div>
</form>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    $(function () {
//上传框被点击时
        $(".hh-upload-item").click(function () {
            $(".hh-upload").click();
        })

        $(".hh-upload").change(function () {
            let files = $(".hh-upload").prop("files");
            let formData = new FormData();
            formData.append("file", files[0]);
            $.ajax({
                url: '/file/upload',                             //请求地址
                type: 'post',                               //请求方法
                data: formData,
                processData: false,                         //阻止序列化表单（key=value）
                contentType: false,                         //设置内容类型为非普通表单内容
                dataType: 'json',
                success: function (e) {
                    $("#img").val(e.message);
                    $(".hh-upload-item>i").hide();
                    $(".hh-upload-item>img").attr("src", "/file/show?name=" + e.message);
                    $(".hh-upload-item>img").show();
                }
            })
        })

        //提交
        $("form").submit(function () {
            let data = $('form').serialize();
            $.post('/brand/update', data, function (e) {
                if (e.result) {
                    //成功提示
                    parent.layer.msg(e.message, {icon: 1});
                    //关闭弹窗
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    //刷新列表
                    $(".right-body", parent.document).load("/brand/page");
                } else {
                    layer.msg(e.message, {icon: 2});
                }
            })

            return false;
        })

        //关闭按钮
        $(".close").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        })
    })

    $(".hh-upload-item>i").hide();
    $(".hh-upload-item>img").show();
</script>
</body>
</html>
